import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'

interface Props {
  title:String
}

const Header = (props: Props) => {
  const navigation = useNavigation()

  const navigateBack = () => {
    navigation.goBack()
  }
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={ navigateBack }>
        <View style={styles.location}>
          <Text style={styles.text}>返回</Text>
        </View>
      </TouchableWithoutFeedback>
      <View  style={styles.search}>
        <Text style={styles.titleText}>{ props.title }</Text>
      </View>
      <View style={styles.location}>
        <Text style={styles.text}></Text>
      </View>
    </View>
  )
}

export default Header

const styles = StyleSheet.create({
  container:{
    height: 44,
    backgroundColor:"#f55",
    display: 'flex',
    flexDirection:'row',
    alignItems:'center',
  },
  location:{
    display: 'flex',
    alignItems:'center',
    justifyContent:'center',
    flex: 1,
  },
  search:{
    flex: 8,
    display: 'flex',
    justifyContent:'center',
    alignItems:'center'
  },
  text:{
    color: '#fff',
    fontSize:16
  },
  titleText:{
    fontSize:18,
    color: '#fff'
  }
})
